<template>
  <div class="page-container">
    <el-card class="card-container">
      <template #header>
        <div class="card-header">
          <span>评论管理测试页面</span>
        </div>
      </template>
      
      <div v-if="loading" style="text-align: center; padding: 50px;">
        <el-icon class="is-loading"><Loading /></el-icon>
        <p>正在加载...</p>
      </div>
      
      <div v-else>
        <p>页面加载成功！</p>
        <p>评论数量: {{ commentList.length }}</p>
        <p>配置状态: {{ configLoaded ? '已加载' : '未加载' }}</p>
        
        <el-table :data="commentList" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="content" label="评论内容" min-width="200" />
          <el-table-column prop="userId" label="用户ID" width="100" />
          <el-table-column prop="articleId" label="文章ID" width="100" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Loading } from '@element-plus/icons-vue'
import { getCommentList } from '@/api/comment'
import { getConfigStatus } from '@/api/system'

const loading = ref(true)
const commentList = ref([])
const configLoaded = ref(false)

const loadData = async () => {
  try {
    console.log('开始加载测试页面数据...')
    
    // 测试配置API
    try {
      const configResult = await getConfigStatus()
      console.log('配置API响应:', configResult)
      configLoaded.value = true
    } catch (error) {
      console.error('配置API失败:', error)
    }
    
    // 测试评论API
    try {
      const commentResult = await getCommentList({ page: 1, size: 10 })
      console.log('评论API响应:', commentResult)
      if (commentResult.code === 200) {
        commentList.value = commentResult.data.records || []
      }
    } catch (error) {
      console.error('评论API失败:', error)
    }
    
    console.log('测试页面数据加载完成')
  } catch (error) {
    console.error('加载数据时出现错误:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.page-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: calc(100vh - 60px);
}

.card-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #303133;
  }
}
</style>